$remFontSize ?= 16px

// Set the number of columns you want to use on your layout
$gridColumns ?= 12

// Set the gutter between columns
$gutterWidth ?= 1rem

// Create or remove breakpoints for your project
$breakpoints ?= {
  xs: {
    size: 0,
    container: 28rem
  },
  sm: {
    size: 48rem,
    container: 48rem - $gutterWidth
  }
}

$enabledBreakpoints  ?= 'xs', 'sm'
$flexboxgridMaxWidth ?= 75rem - $gutterWidth
$gutterCompensation  ?= ($gutterWidth * .5 * -1)
$halfGutterWidth     ?= ($gutterWidth * .5)

$mediaMobileMin = s('(min-width: %s)', $breakpoints['sm']['size'])
$mediaMobileMax = s('(max-width: %s)', ($breakpoints['sm']['size'] - 1/$remFontSize))

// MD Breakpoints，Mobile Fisrt
$mediaInXS      = '(max-width: 29.9rem)'
$mediaInSM      = '(min-width: 600px) and (max-width: 959px)'
$mediaInMD      = '(min-width: 960px) and (max-width: 1263px)'
$mediaInLG      = '(min-width: 1264px) and (max-width: 1903px)'
$mediaInXL      = '(min-width: 1904px)'

// The division here is based on iPad 768, which is different from MD standard
// The advantage of the method is that it does not require Mobile First
$mediaInMobile  = s('(min-width: 0px) and %s', $mediaMobileMax)
$mediaInDesktop = '(min-width: 768px)'
$mediaInSmallScreen  = s('(min-width: 0px) and %s', s('(max-width: 959px)'))
$mediaInMiddleScreen  = s('(min-width: 0px) and %s', s('(max-width: 1315px)'))
$mediaInBigScreen = '(min-width: 1280px)'

// Widths
$containerMaxWidth = 1512px
